<template>
  <div id="app">
    <input type="text" placeholder="请输入手机号" v-model="usernames" />

    <input type="password" placeholder="请输入密码" v-model="passwords" />

    <span class="btn" @click="submit">提交</span>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      usernames: "",
      passwords: "",
    };
  },

  methods: {
    submit() {
      console.log(this.usernames);

      axios
        .post("http://124.223.14.236:3001/api/user/login", {
          username: this.usernames,
          password: this.passwords,
        })
        .then((res) => {
          if (res.status !== 200) return alert(res.statusTexts);
          alert(res.data.msg + ",成功登录");
        });
    },
  },
};
</script>
<style lang='less'>
body {
  margin: 0 auto;
}
#app {
  padding-left: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

input {
  height: 50px;
  width: 300px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 18px;
}

span {
  display: block;
  width: 200px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  padding-left: 10px;
  border: 1px solid aqua;
  margin-left: 50px;
  font-size: 18px;
}
</style>